import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image,
  TextInput,
  TouchableOpacity,
  Platform,
  ListView,
  Dimensions,
} from 'react-native';

import styles from '../order/editOrderStyle';
import CustomListView from '../global/CustomListView';
import ListViewActivityIndicator from '../global/ListViewActivityIndicator';
import api from '../../services/api';
import _ from 'lodash';

const {width: deviceWidth, height: deviceHeight} = Dimensions.get('window');

class CardCityList extends Component {
    constructor(props) {
		super(props);
        this.list = [];

        this._dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
            //sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });

        this.state = {
			dataSource: this._dataSource.cloneWithRows([]),
            noData: false
		};

		// this.props.navigator.setOnNavigatorEvent(this._onNavigatorEvent.bind(this));
	}

    componentDidMount() {
        this.onLoad();
    }

    onLoad(){
        if(this.state.noData){
            this.setState({ noData: false});
        }

        this._getWithdrawList();
    }

    componentWillUnmount () {
        this.clearTime && clearTimeout(this.clearTime);
    }

    _onSearchResultListItemPress(rowData){
        let {navigator, dispatch, actions} = this.props;
        this._activityIndicator.setState({ visible: true,});
        this.clearTime = setTimeout(()=>{
            dispatch(actions.card.card_city_change(rowData.city));

            navigator.pop();
        },100);
    }

    async _getWithdrawList(){
        let list;
        let {card} = this.props;
        list = await api.post('/card/citylist', {province:card.card_province});

        this._endWithdrawList(list.data);
    }


    _endWithdrawList(list){

        // this.totalpage = list.total_page;
        this.list = list;

        if(this.list.length==0){
            this.setState({noData: true});
            return;
        }

        this.setState({
            dataList: list,
            dataSource: this._dataSource.cloneWithRows(list)
        });

        this._activityIndicator.setState({ visible: false,});

    }

    _renderRow(rowData, sectionID, rowID){
        return (
            <TouchableOpacity
                style={[styles.searchItem,{height:45}]}
                activeOpacity={0.7}
                onPress={this._onSearchResultListItemPress.bind(this, rowData)}>
                <View style={{flexDirection: 'row',alignItems:'center',}}>
                    <View style={{marginLeft: 10,}}>
                        <Text style={{fontSize: 15, color: '#555555',}}>{rowData.city}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    _renderNodata(){
        return (
            <View style={{alignItems:'center',justifyContent:'center',flex:1,backgroundColor:'#fff'}}>
                <Image source={require('../../../img/hk_nodata_icon.png')} style={styles.leftImage}/>
                <Text style={{fontSize: 13, color: '#B5B5B5',marginTop:10}}>暂无列表~</Text>
            </View>
        );
    }

    render() {
        return (
            this.state.noData?this._renderNodata():
            <View style={{flex:1,backgroundColor: '#f3f3f3',}}>
                <ListView
                    style={{backgroundColor:'#fff'}}
                    enableEmptySections={true}
                    dataSource={this.state.dataSource}
                    renderRow ={this._renderRow.bind(this)}
                />
                <ListViewActivityIndicator
                    ref={ (component) => this._activityIndicator = component }
                    style={{marginRight: 10, position:'absolute', left: (deviceWidth - 20) / 2, top: (deviceHeight - 64 - 70) / 2, }}
                    color={'#a9a9a9'}/>
            </View>
        );
    }
}

var connectHelper = require('../../services/connectHelper');
CardCityList = connectHelper(state => state)(CardCityList);

module.exports = CardCityList;
